<template>
  <div class="newMenu">
    <div class="newText">新秀菜谱</div>
    <div class="all" @click="xinxiu">全部</div>
    <div class="newMenuBox" ref="box"></div>
    <div class="img1" @click="fanye1" ref="img1"></div>
    <div class="img2" @click="fanye2" ref="img2"></div>
  </div>
</template>

<script>
export default {
  methods: {
    fanye1() {
      var box = this.$refs.box;
      var img1 = this.$refs.img1;
      var img2 = this.$refs.img2;
      let y = box.style.left.split("p")[0];
      if (y < 0) {
        y -= -519;
        img2.style.backgroundPositionX = "-30px";
      }
      if (y == 0) {
        img1.style.backgroundPositionX = "-120px";
      }
      box.style.left = y + "px";
    },
    fanye2() {
      var box = this.$refs.box;
      var img1 = this.$refs.img1;
      var img2 = this.$refs.img2;
      let x = box.style.left.split("p")[0];
      if (x > -2076) {
        x -= 519;
        img1.style.backgroundPositionX = 0;
      }
      if (x == -2076) {
        img2.style.backgroundPositionX = "-150px";
      }
      box.style.left = x + "px";
    },
  },
  methods: {
    xinxiu() {
      this.$router.push({
        path: `/caidan/centernew`,
      });
    },
  },
  async mounted() {
    this.$axios("/zztz/newMenu").then((res) => {
      res.data.map((el) => {
        // console.log(el);
        let box = this.$refs.box;
        let div = document.createElement("div");
        box.appendChild(div);
        div.style.width = "153px";
        div.style.height = "130px";
        div.style.display = "inline-block";
        div.style.marginRight = "20px";
        div.onclick = function () {
          window.location.href = `/menudetail/${el.cookid}`;
        };

        let img = document.createElement("img");
        div.appendChild(img);
        img.style.width = "153px";
        img.style.height = "100px";
        img.style.cursor = "pointer";
        img.src = el.img;
        img.onmousemove = function () {
          img.style.opacity = "0.8";
        };
        img.onmouseleave = function () {
          img.style.opacity = "1";
        };

        let a1 = document.createElement("a1");
        div.appendChild(a1);
        a1.className = "a1";
        a1.innerHTML = el.title;
        a1.style.display = "inline-block";
        a1.style.width = "140px";
        a1.style.overflow = "hidden";
        a1.style.whiteSpace = "nowrap";
        a1.style.textOverflow = "ellipsis";
        a1.style.textAlign = "center";
        a1.style.fontSize = "15px";
        a1.style.marginTop = "10px";
        a1.style.cursor = "pointer";
        a1.onmousemove = function () {
          a1.style.color = "orangered";
        };
        a1.onmouseleave = function () {
          a1.style.color = "black";
        };
      });
    });
  },
};
</script>

<style scoped="scoped">
.newMenu {
  width: 490px;
  height: 176px;
  position: absolute;
  left: 156px;
  top: 296px;
  overflow: hidden;
}
.newText {
  font-size: 20px;
  font-weight: 700;
  color: #c0ae7d;
}
.all {
  color: #dd3915;
  position: absolute;
  left: 100px;
  top: 5px;
  cursor: pointer;
}
.all:hover {
  background-color: #dd3915;
  color: white;
}
.newMenuBox {
  width: 10000px;
  height: 121px;
  position: absolute;
  top: 39px;
  left: 0;
  transition: 1s all;
}
.img1 {
  position: absolute;
  cursor: pointer;
  right: 33px;
  top: 0px;
  width: 27px;
  height: 27px;
  /* background-color: plum; */
  background-image: url(../img/jinglingtu.png);
  background-position-y: -278px;
  background-position-x: -120px;
}
.img2 {
  position: absolute;
  cursor: pointer;
  right: 0px;
  top: 0px;
  width: 27px;
  height: 27px;
  /* background-color: palegreen; */
  background-image: url(../img/jinglingtu.png);
  background-position-y: -278px;
  background-position-x: -30px;
}
</style>